<!doctype html>
<html> 
<head> 
<meta charset="utf-8">
<title></title> 
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>

<!-- 弹出框 -->
<script src="../js/dialog/artDialog.js?skin=default"></script>
<script src="../js/dialog/iframeTools.js"></script>

<script>
(function (config) {
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})(art.dialog.defaults);
</script>
<!-- photo9 -->	
<script src="./photo9/jquery.cross-slide.min.js"></script>
<script src="./photo9/jquery.cross-slide.js"></script>
<script src="./photo9/jquery.pause.min.js"></script>
<style>
#slideshow {
  width: 800px;
  height: 200px;
}
#placeholder {
  width: 800px;
  height: 500px;
}
div.caption {
	position: absolute;
	margin-top: -75px;
	margin-left: -250px;
	width: 150px;
	text-align: center;
	left: 50%;
	padding: 5px 10px;
	background: black;
	color: white;
	font-family: sans-serif;
	border-radius: 10px;
	display: none;
}
</style>	
<script>
  $(function() {
		var $test3 = $('#placeholder'),		
		$caption = $('div.caption'),
		$pause = $('#pause'),
		$resume = $('#resume'),
		$freeze = $('#freeze'),
		$stop = $('#stop'),
		$restart = $('#restart'),
		STOP = 1, RUN = 2, PAUSE = 3;
		/*
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: './photo9/flip-flops.jpeg'  },
      { src: './photo9/rubber-ring.jpeg' },
      { src: './photo9/sunflower.jpeg'},
      { src: './photo9/sand-castle.jpeg' }
    ])

$('#placeholder').crossSlide({
  speed: 45,
  fade: 1
}, [
  { src: './photo9/sand-castle.jpeg', dir: 'up'   },
  { src: './photo9/sunflower.jpeg',   dir: 'down' },
  { src: './photo9/flip-flops.jpeg',  dir: 'up'   },
  { src: './photo9/rubber-ring.jpeg', dir: 'down' }
]);
*/
	 $('#placeholder').crossSlide({
  fade: 1
}, [
  {
    src:  './images/12-09.JPG',
    alt:  'Sand Castle',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  './images/18-07.JPG',
    alt:  'Sunflower',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  './images/18-13.JPG',
    alt:  'Flip Flops',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  './images/113.jpg',
    alt:  'Rubber Ring',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }
], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined) {
			$caption.text(img.alt).animate({ opacity: .7 })
		} else {
			$caption.animate({ opacity: 0 })
		}
});
$caption.show().css({ opacity: 0 });
	function state(state) {
		$pause.attr('disabled', state != RUN);
		$resume.attr('disabled', state != PAUSE);
		$freeze.attr('disabled', state == STOP);
		$stop.attr('disabled', state == STOP);
	}
	state(RUN);

	$pause.click(function() {
		$test3.crossSlidePause();
		state(PAUSE);
	});

	$resume.click(function() {
		$test3.crossSlideResume();
		state(RUN);
	})

	$freeze.click(function() {
		$test3.crossSlideFreeze();
		state(STOP);
	});

	$stop.click(function() {
		$test3.crossSlideStop();
		$caption.css({ opacity: 0 })
		state(STOP);
	});

	$restart.click(function() {
		$test3.crossSlideRestart();
		state(RUN);
	});
  });
  
 
</script>
</head> 
<body> 
<ul id="toc"> 
	<li><a href="http://localhost/school/index.html">首页</a></li> 
	<li><a href="#copyright">目录</a></li> 
	<li><a href="javascript:void(0)" onClick="art.dialog.open('./photo1/index.html',
    {title: '', width: 720, height: 520});">photo1</a></li> 
    <li><a href="javascript:void(0)" onClick="art.dialog.open('./photo2/index.html',
    {title: '', width: 1000, height: 780});">photo2</a></li> 
    <li><a href="./photo2/index.html" >photo2-2</a></li>
     <li><a href="javascript:void(0)" onClick="art.dialog.open('./photo3/index.html',
    {title: '', width: 1000, height: 780});">photo3</a></li>
         <li><a href="./photo4/index.html" >photo4</a></li>
         <li><a href="./photo5/index.html" >photo5</a></li>
         <li><a href="javascript:void(0)" onClick="art.dialog.open('./photo6/index.html',
    {title: '', width: 1000, height: 780});">photo6</a></li>
    <li><a href="./photo6/index2.html" >photo6-2</a></li>
    <li><a href="./photo7/index.html" >photo7</a></li>
         <li><a href="javascript:void(0)" onClick="art.dialog.open('./photo8/index.html',
    {title: '', width: 1000, height: 780});">photo8</a></li>
    <li><a href="./photo8/index.html" >photo8-2</a></li>
         <li><a href="javascript:void(0)" onClick="art.dialog.open('./photo9/index.html',
    {title: '', width: 1000, height: 780});">photo9</a></li>
    <li><a href="./photo10/index.html" >photo10</a></li>
	<li><a href="javascript:history.go(-1);">返回</a></li> 
</ul> 
<div id="wrapper"> 
	<div id="container">
		<div id="copyright">


  <button id="freeze">冻结</button>
  <button id="stop">停止</button>
  <button id="restart">重启</button>
  <button id="pause">暂停</button>
  <button id="resume" disabled="">开始</button>

<div id="placeholder">Loading...</div>
<div class="caption"></div>


  			<h1 style="margin-top:0;"></h1>
				 <!-- <div id="slideshow"></div> 
              <div id="placeholder">Loading...</div>  -->
		</div>


	</div>
	<script type="text/javascript" src="../js/main.js"></script>
</body> 
</html>
